<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IView LayOut</title>
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>
</head>
<style type="text/css">
    #sider{
        height: 300px;
    }
    #header{
        height: 100px;
    }
    #footer{
        height: 100px;
    }
</style>
<body>
<div id="div" class="layout">
    <Layout>
        <Header id="header">Header</Header>
        <Layout>
            <Sider id="sider" hide-trigger>Sider</Sider>
            <Content id="content">Content</Content>
        </Layout>
        <Footer id="footer">Footer</Footer>
    </Layout>
</div>
<script>
    new Vue({
        el:"#div",
    })
</script>
</body>
</html>
